<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ZUI，一个简单灵活的前端框架。">
  <meta name="author" content="Zentao">

  <title>ZUI - 开源HTML5跨屏框架</title>

  <link href="css/zui.min.css" rel="stylesheet">
  <link href="../assets/datetimepicker/css/datetimepicker.min.css" rel="stylesheet">
  <link href="../assets/chosen/css/chosen.min.css" rel="stylesheet">
  <link href="css/doc.css" rel="stylesheet">

  <!--[if lt IE 9]>
  <script src="../assets/html5shiv.js"></script>
  <script src="../assets/respond.js"></script>
  <![endif]-->
</head>
<body>
  <header data-tab="javascript">
  </header>
  <div id="main">
    <div class="page-header">
      <h1>Javascript插件</h1>
    </div>

    <section id="store" data-lite='true' data-version='1.2'>
      <div class="page-header">
        <h2>本地存储</h2>
      </div>
      <p>本地存储（Local storage）是在浏览器本地存储应用数据的好途径。相比较cookie拥有更大的存储空间（相同域下一般达到5M存储空间），使用更灵活，而且不会在每次提交中发送到服务器。几乎所有浏览器都支持本地存储，甚至包括IE8。</p>
      <p>ZUI中提供读写本地存储的插件。文件路径为：<code>/src/js/store.js</code>。</p>

      <h3>如何使用</h3>
      <p>要使用本地存储，直接使用<code>windows.store</code>对象。<code>store</code>提供了一系列方法来操作本地存储数据。</p>
      <p>以下列出store对象提供的属性和方法：</p>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>属性或方法</th>
            <th>说明</th>
            <th>参数和要点</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>store.enable</code></td>
            <td>属性，指示本地存储是否可用</td>
            <td>
              <ul>
                <li>如果浏览器不支持本地存储，则该值为<code>false</code>；</li>
                <li>即便浏览器支持本地存储，但该值被手动设置为<code>false</code>，则无法通过<code>store</code>对象进行本地存储相关操作（原生<code>localStorage</code>不影响）。</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>store.slience</code></td>
            <td>属性，默认值为<code>true</code></td>
            <td>当该值为<code>true</code>时，本地存储不可用时进行存储和读取值时不抛出异常。</td>
          </tr>
          <tr>
            <td><code>store.storage</code></td>
            <td>属性，返回浏览器原生<code>localStorage</code>对象</td>
            <td></td>
          </tr>
          <tr>
            <td><code>store.length()</code></td>
            <td>方法，返回本地存储条目数量</td>
            <td>即使本地存储不可用时也会返回0。</td>
          </tr>
          <tr>
            <td><code>store.remove(key)</code></td>
            <td>移除指定的条目</td>
            <td>
              参数：
              <ul>
                <li><code>key</code>：需要移除的条目的名称。</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>store.get(key)</code></td>
            <td>获取存储条目的值</td>
            <td>
              <p>参数：<ul>
                <li><code>key</code>：存储条目的名称。</li>
              </ul></p>
              <p>与原生的<code>getItem</code>方法不同，该方法会进行反序列化操作，返回类型为存储的值的原类型。</p>
            </td>
          </tr>
          <tr>
            <td><code>store.set(key, value)</code></td>
            <td>设置存储条目的值</td>
            <td>
              <p>参数：<ul>
                <li><code>key</code>：存储条目的名称。</li>
                <li><code>value</code>：可选，存储条目的名称，如果该值为<code>null</code>或者缺省，则会移除之前存储的值。</li>
              </ul></p>
              <p>与原生的<code>setItem</code>方法不同，该方法会进行序列化操作，所有value可以为任意类型，但不能是函数或者对象属性包含函数。</p>
            </td>
          </tr>
          <tr>
            <td><code>store.key(index)</code></td>
            <td>根据索引获取存储条目的名称</td>
            <td>参数：<ul>
              <li><code>index</code>：条目索引，为自然数。</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>store.forEach(callback)</code></td>
            <td>遍历所有存储条目</td>
            <td>参数：<ul>
              <li><code>callback</code>：遍历函数，该函数提供两个参数，第一个参数为当前遍历条目的名称，第二个参数为值。</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>store.serialize(value)</code></td>
            <td>将一个任意类型的值序列化为字符串</td>
            <td>参数：<ul>
              <li><code>value</code>：需要序列化的值。</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>store.deserialize(value)</code></td>
            <td>将一个字符串反序列化为值或对象。</td>
            <td>参数：<ul>
              <li><code>value</code>：需要反序列化的字符串。</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>store.getAll()</code></td>
            <td>获取所有存储的条目</td>
            <td>
              <p>返回一个对象，该对象的属性和对应的属性值记为存储的条目。</p>
            </td>
          </tr>
          <tr>
            <td><code>store.removeItem(key)</code></td>
            <td>方法<code>store.remove()</code>的别名写法</td>
            <td>
              参数：
              <ul>
                <li><code>key</code>：需要移除的条目的名称。</li>
              </ul></td>
          </tr>
          <tr>
            <td><code>store.getItem(key)</code></td>
            <td>获取指定名称的条目值</td>
            <td>
              <p>该方法相当于<code>localStorage.getItem(key)</code>，获取的值永远是序列化之后的字符串。</p>
              <p>参数：
              <ul>
                <li><code>key</code>：条目名称。</li>
              </ul></td></p>
            </td>
          </tr>
          <tr>
            <td><code>store.setItem(key, value)</code></td>
            <td>设置存储的值</td>
            <td>
              <p>该方法相当于<code>localStorage.setItem(key, value)</code></p>
              <p>参数：
              <ul>
                <li><code>key</code>：存储的名称</li>
                <li><code>value</code>：存储的值</li>
              </ul></p>
            </td>
          </tr>
        </tbody>
      </table>
      <h4>代码示例</h4>
<pre class='prettyprint'>
store.set('name', 'catouse');                      // 使用本地存储设置'name'值为'catouse'
store.set('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储

console.log(store.get('name'));                    // 从本地存储获取'name'的值
console.log(store.get('date').year);               // 从本地存储获取'date'值的year属性

store.forEach(function(key, value)                 // 遍历所有本地存储的条目
{
    console.log(value);
});

console.log(store.key(0));                         // 获取本地存储第一个条目的名称

store.remove('name');                              // 从本地存储移除‘name’的值
store.clear();                                     // 清空所有本地存储的条目
</pre>

      <h3>本地页面存储</h3>
      <p>很多时候，不同页面相同名称的条目的值需要分别保存。<code>store</code>对象提供了一系列方法和属性来读写同一页面（相同路径）的条目。</p>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>属性或方法</th>
            <th>说明</th>
            <th>参数和要点</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>store.page</code></td>
            <td>属性，当前页面存储的数据对象</td>
            <td>
              <ul>
                <li>该对象的属性或对应的值即为对应的条目。</li>
                <li>这些属性都可以读写，如果进行了更改操作，需要调用<code>store.pageSave()</code>方法来存储到本地。如果将属性设置为<code>null</code>，则会在下次调用<code>pageSave()</code>时移除该属性。</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>store.pageGet(key)</code></td>
            <td>获取当前页面指定名称的值</td>
            <td>参数：<ul>
              <li><code>key</code>：指定条目的名称。</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>store.pageSet(key,value)</code></td>
            <td>设置值</td>
            <td>参数：<ul>
              <li><code>key</code>：名称</li>
              <li><code>value</code>：值</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>store.pageClear()</code></td>
            <td>清除当前页面所有存储的条目</td>
            <td></td>
          </tr>
          <tr>
            <td><code>store.pageRemove(key)</code></td>
            <td>移除当前页面存储的指定条目</td>
            <td>参数：<ul>
              <li><code>key</code>：指定条目的名称。</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>store.pageSave()</code></td>
            <td>立即保存当前页面存储的条目到本地存储</td>
            <td>一般情况下不需要调用此方法，除非手动更改<code>store.page</code>属性。</td>
          </tr>
        </tbody>
      </table>
      <h4>代码示例</h4>
<pre class='prettyprint'>
/* 以下操作的键值仅针对当前页面 */
store.pageSet('name', 'catouse');                      // 使用本地存储设置'name'值为'catouse'
store.pageSet('date', {year: 2014, month: 8, day: 6}); // 将一个对象存储到本地存储

console.log(store.pageGet('name'));                    // 从本地存储获取'name'的值
console.log(store.pageGet('date').year);               // 从本地存储获取'date'值的year属性

store.pageRemove('name');                              // 从本地存储移除‘name’的值
store.pageClear();                                     // 清空所有本地存储的条目
</pre>

      <h3>实例</h3>
      <div class="example" id="storeExample">
        <div class="alert hide alert-success">
          <h4>本地存储可用，刷新页面或关闭浏览器不会丢失你的数据。</h4>
        </div>
        <div class="alert hide alert-warning">
          <h4>本地存储不可用！</h4>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th style="width:80px">索引</th>
              <th style="width:40%">名称</th>
              <th>值</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="storeTable">
          </tbody>
          <tfoot>
            <tr>
              <td colspan='2'>
                <div class="input-group">
                  <span class="input-group-addon">名称</span>
                  <input type="text" id="storeName" name="storeName" class="form-control">
                  <span class="input-group-addon fix-border">值</span>
                  <input type="text" id="storeValue" name="storeValue" class="form-control">
                  <span class="input-group-btn"><button type="button" id="storeAdd" class="btn btn-primary">保存</button></span>
                </div>
              </td>
              <td colspan="2"><button type="button" class="btn btn-danger" id="storeClear">清空</button></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </section>

    <section id="modals" data-lite='true'>
      <div class="page-header">
        <h2>模态框</h2>
      </div>

      <h3>类型</h3>
      <h4>基本类型</h4>
      <p>
        启动方式一：通过在一个起控制器作用的页面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指向特定的模态框即可。
      </p>
      <p>
        启动方式二：只需一行JavaScript代码，即可通过id myModal调用模态框： $('#myModal').modal(options)
      </p>

      <div class='example'>
        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalTitle" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalTitle"> <i class='icon-heart'></i>
                  标题
                </h4>
              </div>
              <div class="modal-body">
                <p>模态对话框的内容。</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
              </div>
            </div>
            <!-- /.modal-content --> </div>
          <!-- /.modal-dialog --> </div>
        <!-- /.modal --> </div>

      <h4>框架对话框触发器</h4>
      <p>
        在新打开的模态对话框中使用
        <code>iframe</code>
        来加载一个全新的网页。
      </p>
      <div class='example'>
        <a href="controls.html" data-type='iframe' data-toggle='modal' class='btn btn-success'> <i class='icon-heart'></i>
          打开框架对话框
        </a>
      </div>

      <h3>变化</h3>
      <h4>选项</h4>
      <p>aria-labelledby="myModalTitle"属性指向模态框标题。</p>
      <p>aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。</p>
      <p>aria-describedby='myModelBody'属性用以指向描述信息。</p>
      <p>
        通过对div.modal增加data-*选项来改变模态对话框。或通过js改变$('#myModal').modal({ keyboard: false })
      </p>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 80px;">名称</th>
            <th style="width: 80px;">类型</th>
            <th style="width: 80px;">默认值</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>backdrop</td>
            <td>boolean/static</td>
            <td>true</td>
            <td>
              <p>
                <code>true</code>
                时，添加一个背景元素，且点击外部区域将其关闭。
              </p>
              <p>
                <code>false</code>
                时，不会添加背景元素，且点击外部区域不会关闭。
              </p>
              <p>
                <code>static</code>
                时，添加一个背景元素，且点击外部区域不会关闭。
              </p>
            </td>
          </tr>
          <tr>
            <td>keyboard</td>
            <td>boolean</td>
            <td>true</td>
            <td>
              <p>
                <code>true</code>
                时，按esc键关闭模态框。
              </p>
              <p>
                <code>false</code>
                时，按esc不会关闭模态框。
              </p>
            </td>
          </tr>
          <tr>
            <td>show</td>
            <td>boolean</td>
            <td>true</td>
            <td>
              <p>
                <code>true</code>
                时，初始化时即显示模态对话框。
              </p>
              <p>
                <code>true</code>
                时，初始化时不显示模态对话框。
              </p>
            </td>
          </tr>
          <tr>
            <td>remote</td>
            <td>path</td>
            <td>false</td>
            <td>
              <p>
                如果提供了远程url地址，就会通过 jQuery的
                <code>load</code>
                方法加载内容并注入到
                <code>.modal-body</code>
                中。如果你使用的是data属性api，你还可以使用
                <code>href</code>
                标签指定远程数据源。
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <h4>方法和事件</h4>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 80px;">方法</th>
            <th>例子</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>.modal(options)</td>
            <td>
              <code>$('#myModal').modal({ keyboard: false })</code>
            </td>
            <td>让你指定的内容变成一个模态对话框。接受一个可选的参数object.</td>
          </tr>
          <tr>
            <td>.modal('toggle')</td>
            <td>
              <code>$('#myModal').modal('toggle')</code>
            </td>
            <td>手动打开或隐藏一个模态对话框。</td>
          </tr>
          <tr>
            <td>.modal('show')</td>
            <td>
              <code>$('#myModal').modal('show')</code>
            </td>
            <td>手动打开一个模态对话框。</td>
          </tr>
          <tr>
            <td>.modal('hide')</td>
            <td>
              <code>$('#myModal').modal('hide')</code>
            </td>
            <td>手动隐藏一个模态对话框。</td>
          </tr>
        </tbody>
      </table>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 80px;">事件</th>
            <th>使用</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>show.bs.modal</td>
            <td>
              <code>$('#myModal').on('show.bs.modal', functi'on () { // do something… })</code>
            </td>
            <td>
              当
              <code>show</code>
              方法被调用时，此事件将被立即触发。
            </td>
          </tr>
          <tr>
            <td>shown.bs.modal</td>
            <td>
              <code>$('#myModal').on('shown.bs.modal', function () { // do something… })</code>
            </td>
            <td>当模态对话框呈现到用户面前时（会等待过渡效果执行结束）此事件被触发。</td>
          </tr>
          <tr>
            <td>hide.bs.modal</td>
            <td>
              <code>$('#myModal').on('hide.bs.modal', function () { // do something… })</code>
            </td>
            <td>
              当
              <code>hide</code>
              方法被调用时，此事件将被立即触发。
            </td>
          </tr>
          <tr>
            <td>hidden.bs.modal</td>
            <td>
              <code>$('#myModal').on('hidden.bs.modal', function () { // do something… })</code>
            </td>
            <td>当模态对话框被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。</td>
          </tr>
        </tbody>
      </table>

      <h4>改变模态框大小</h4>
      <p>
        通过重新定义.modal-dialog宽度
        <code>.modal-dialog {width:*}</code>
        来改变模态框大小
      </p>
      <div class='example'>
        <style>#resizedModal .modal-dialog{width:50%;}</style>
        <button class="btn btn-primary" data-toggle="modal" data-target="#resizedModal">width:50%</button>
        <div class="modal" id="resizedModal" tabindex="-1" role="dialog" aria-labelledby="resizedModalTitle" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="resizedModalTitle">标题</h4>
              </div>
              <div class="modal-body">
                <h5>
                  通过重新定义.modal-dialog宽度
                  <code>.modal-dialog {width:*}</code>
                  来改变模态框大小
                </h5>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
              </div>
            </div>
            <!-- /.modal-content --> </div>
          <!-- /.modal-dialog --> </div>
        <!-- /.modal --> </div>
      <h4>载入效果</h4>
      <p>
        目前有div.modal.fade和div.modal.in效果，需要
        <a target='_blank' href='http://v2.bootcss.com/javascript.html#transitions'>transition.js</a>
        支持。
      </p>
      <div class="example">
        <button class="btn btn-primary" data-toggle="modal" data-target="#tsModal">fade效果</button>
        <div class="modal fade" id="tsModal" tabindex="-1" role="dialog" aria-labelledby="tsModalTitle" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="tsModalTitle">标题</h4>
              </div>
              <div class="modal-body">
                <p>
                  目前有div.modal.fade和div.modal.in效果，需要
                  <a target='_blank' href='http://v2.bootcss.com/javascript.html#transitions'>transition.js</a>
                  支持。
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
              </div>
            </div>
            <!-- /.modal-content --> </div>
          <!-- /.modal-dialog --> </div>
        <!-- /.modal --> </div>
    </section>

    <section id='dropdowns'>
      <div class="page-header">
        <h2>下拉菜单 <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
      </div>

      <h3>类型</h3>
      <h4>基本类型</h4>
      <p>
        将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码。
      </p>
      <p>通过是否指定data-toggle='dropdown'来开关下拉菜单。</p>
      <div class="example">
        <div class="dropdown">
          <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
            操作
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation" class="dropdown-header">Dropdown header</li>
            <li>
              <a href="#">编辑</a>
            </li>
            <li>
              <a href="#">删除</a>
            </li>
            <li class="divider"></li>
            <li role="presentation" class="dropdown-header">Dropdown header</li>
            <li>
              <a href="#">修改</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- /example -->

      <h4>导航条下来菜单</h4>
      <div class="example">
        <ul class="nav nav-primary">
          <li class="active">
            <a href="#">首页</a>
          </li>
          <li>
            <a href="#">演示</a>
          </li>
          <li>
            <a href="#">下载</a>
          </li>
          <li>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              团队
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">关于我们</a>
              </li>
              <li>
                <a href="#">开发计划</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">开源代码</a>
              </li>
              <li>
                <a href="#">团队博客</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <h4>标签下拉菜单</h4>
      <div class="example">
        <div class="dropdown">
          <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
            操作
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li>
              <a href="#">编辑</a>
            </li>
            <li>
              <a href="#">删除</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="#">修改</a>
            </li>
          </ul>
        </div>
      </div>

      <h4>按钮下拉菜单</h4>
      <div class="example">
        <div class="btn-group">
          <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            操作
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li>
              <a href="#">编辑</a>
            </li>
            <li>
              <a href="#">删除</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="#">修改</a>
            </li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn">操作</button>
          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">编辑</a>
            </li>
            <li>
              <a href="#">删除</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="#">增加</a>
            </li>
          </ul>
        </div>
      </div>

      <h3>变化</h3>
      <h4>弹出方式</h4>
      <div class="example">
        <div class="btn-group">
          <button type="button" class="btn">默认向下</button>
          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">div.btn-group</a>
            </li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn">下右</button>
          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu pull-right" role="menu">
            <li>
              <a href="#">div.btn-group > ul.dropdown-menu.pull-right</a>
            </li>
          </ul>
        </div>
        <div class="btn-group dropup">
          <button type="button" class="btn">向上</button>
          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">div.btn-group.dropup</a>
            </li>
          </ul>
        </div>
        <div class="btn-group dropup">
          <button type="button" class="btn">向右</button>
          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu pull-right" role="menu">
            <li>
              <a href="#">div.btn-group.dropup > ul.dropdown-menu.pull-right</a>
            </li>
          </ul>
        </div>
      </div>

      <h4>下拉菜单的子菜单</h4>
      <div class="example">
        <div class="btn-group dropup">
          <button type="button" class="btn">编辑</button>
          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
            <li>
              <a tabindex="-1" href="#">关闭</a>
            </li>

            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">评审</a>
              <ul class="dropdown-menu">
                <li>
                  <a tabindex="-1" href="#">确认通过</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">有待明确</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">拒绝</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a tabindex="-1" href="#">已完成</a>
                    </li>
                    <li>
                      <a tabindex="-1" href="#">延期</a>
                    </li>
                    <li>
                      <a tabindex="-1" href="#">不做</a>
                    </li>
                    <li>
                      <a tabindex="-1" href="#">已取消</a>
                    </li>
                    <li>
                      <a tabindex="-1" href="#">设计如此</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">计划</a>
              <ul class="dropdown-menu">
                <li>
                  <a tabindex="-1" href="#">Plan A</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">Plan B</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">Plan C</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">Plan D</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">Plan E</a>
                </li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">阶段</a>
              <ul class="dropdown-menu">
                <li>
                  <a tabindex="-1" href="#">未开始</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">已计划</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">已立项</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">研发中</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">研发完毕</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">测试中</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">测试完毕</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">已验收</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">已发布</a>
                </li>
              </ul>
            </li>

            <li class="divider"></li>
            <li class="dropdown-submenu pull-left">
              <a tabindex="-1" href="#">.pull-left</a>
              <ul class="dropdown-menu">
                <li>
                  <a tabindex="-1" href="#">Item1</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">Item2</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

      <h4>小标题和禁用</h4>
      <p>通过li.dropdown-header增加小标题，为li增加.disabled来禁用。</p>
      <div class="example">
        <div class="dropdown">
          <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            操作
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li class="dropdown-header">基本操作</li>
            <li>
              <a href="#">编辑</a>
            </li>
            <li class='disabled'>
              <a role="menuitem" tabindex="-1" href="#">修改</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">其他操作</li>
            <li>
              <a href="#">增加</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- /example --> </section>

    <section id='tabs' class="page-section">
      <div class="page-header">
        <h2>标签页 <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
      </div>
      <p>一般结合导航使用。</p>

      <h3>类型</h3>
      <h4>基本类型</h4>
      <p>
        通过
        <code>ul.nav + div.tab-content</code>
        的方式实现。
      </p>
      <div class="example">
        <ul id="myTab" class="nav nav-tabs">
          <li class="active">
            <a href="#tab1" data-toggle="tab">Tab1</a>
          </li>
          <li>
            <a href="#tab2" data-toggle="tab">Tab2</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Other tabs <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
              <li>
                <a href="#tab3" tabindex="-1" data-toggle="tab">Tab3</a>
              </li>
              <li>
                <a href="#tab4" tabindex="-1" data-toggle="tab">Tab4</a>
              </li>
            </ul>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane in active" id="tab1">
            <p>口是心非你深情的承诺</p>
            <p>都随着西风飘渺远走</p>
            <p>痴人梦话我钟情的倚托</p>
            <p>就像枯萎凋零的花朵</p>
          </div>
          <div class="tab-pane" id="tab2">
            <p>星火燎原我热情的眼眸</p>
            <p>曾点亮最灿烂的天空</p>
            <p>晴天霹雳你绝情的放手</p>
            <p>在我最需要你的时候</p>
            <p>于是爱恨交错人消瘦</p>
          </div>

          <div class="tab-pane" id="tab3">
            <p>怕是怕这些苦没来由</p>
            <p>于是悲欢起落人静默</p>
            <p>等一等这些伤会自由</p>
            <p>于是爱恨交错人消瘦</p>
            <p>怕是怕这些苦没来由</p>
            <p>于是悲欢起落人静默</p>
            <p>等一等这些伤会自由</p>
          </div>
          <div class="tab-pane" id="tab4">
            <p>口是心非你矫情的面容</p>
            <p>都烙印在心灵的角落</p>
            <p>无话可说我纵情的结果</p>
            <p>就像残破光秃的山头</p>
            <p>浑然天成我纯情的悸动</p>
            <p>曾奔放最滚烫的节奏</p>
            <p>不可收拾你滥情的抛空</p>
          </div>
        </div>
      </div>

      <h3>变化</h3>
      <h4>导航样式</h4>
      <p>
        <code>ul.nav.nav-pills</code>
        ，通过修改ul的.nav-*来修改导航样式，具体见导航控件。
      </p>
      <div class="example">
        <ul id="myTab2" class="nav nav-pills">
          <li class="active">
            <a href="#tab11" data-toggle="tab">Tab1</a>
          </li>
          <li>
            <a href="#tab22" data-toggle="tab">Tab2</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Other tabs <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
              <li>
                <a href="#tab33" tabindex="-1" data-toggle="tab">Tab3</a>
              </li>
              <li>
                <a href="#tab44" tabindex="-1" data-toggle="tab">Tab4</a>
              </li>
            </ul>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane in active" id="tab11">
            <p>口是心非你深情的承诺</p>
            <p>都随着西风飘渺远走</p>
            <p>痴人梦话我钟情的倚托</p>
            <p>就像枯萎凋零的花朵</p>
          </div>
          <div class="tab-pane" id="tab22">
            <p>星火燎原我热情的眼眸</p>
            <p>曾点亮最灿烂的天空</p>
            <p>晴天霹雳你绝情的放手</p>
            <p>在我最需要你的时候</p>
            <p>于是爱恨交错人消瘦</p>
          </div>

          <div class="tab-pane" id="tab33">
            <p>怕是怕这些苦没来由</p>
            <p>于是悲欢起落人静默</p>
            <p>等一等这些伤会自由</p>
            <p>于是爱恨交错人消瘦</p>
            <p>怕是怕这些苦没来由</p>
            <p>于是悲欢起落人静默</p>
            <p>等一等这些伤会自由</p>
          </div>
          <div class="tab-pane" id="tab44">
            <p>口是心非你矫情的面容</p>
            <p>都烙印在心灵的角落</p>
            <p>无话可说我纵情的结果</p>
            <p>就像残破光秃的山头</p>
            <p>浑然天成我纯情的悸动</p>
            <p>曾奔放最滚烫的节奏</p>
            <p>不可收拾你滥情的抛空</p>
          </div>
        </div>
      </div>

      <h4>载入效果</h4>
      <p>为每个.tab-pane添加.fade可以让标签页具有淡入的特效。同时第一个标签页所对应的的内容区必须也添加.in</p>
      <div class="example">
        <ul id="myTab3" class="nav nav-pills">
          <li class="active">
            <a href="#tab111" data-toggle="tab">fade in</a>
          </li>
          <li>
            <a href="#tab222" data-toggle="tab">in</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Other tabs
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
              <li>
                <a href="#tab333" tabindex="-1" data-toggle="tab">fade</a>
              </li>
              <li>
                <a href="#tab444" tabindex="-1" data-toggle="tab">fade</a>
              </li>
            </ul>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane fade in active" id="tab111">
            <p>口是心非你深情的承诺</p>
            <p>都随着西风飘渺远走</p>
            <p>痴人梦话我钟情的倚托</p>
            <p>就像枯萎凋零的花朵</p>
          </div>
          <div class="tab-pane fade" id="tab222">
            <p>星火燎原我热情的眼眸</p>
            <p>曾点亮最灿烂的天空</p>
            <p>晴天霹雳你绝情的放手</p>
            <p>在我最需要你的时候</p>
            <p>于是爱恨交错人消瘦</p>
          </div>

          <div class="tab-pane fade" id="tab333">
            <p>怕是怕这些苦没来由</p>
            <p>于是悲欢起落人静默</p>
            <p>等一等这些伤会自由</p>
            <p>于是爱恨交错人消瘦</p>
            <p>怕是怕这些苦没来由</p>
            <p>于是悲欢起落人静默</p>
            <p>等一等这些伤会自由</p>
          </div>
          <div class="tab-pane fade" id="tab444">
            <p>口是心非你矫情的面容</p>
            <p>都烙印在心灵的角落</p>
            <p>无话可说我纵情的结果</p>
            <p>就像残破光秃的山头</p>
            <p>浑然天成我纯情的悸动</p>
            <p>曾奔放最滚烫的节奏</p>
            <p>不可收拾你滥情的抛空</p>
          </div>
        </div>
      </div>

      <h3>方法和事件</h3>
      <table class="table table-bordered table-striped">
        <tr>
          <td>方法</td>
          <td>例子</td>
          <td>描述</td>
        </tr>
        <tr>
          <td>
            <code>.tab('show')</code>
          </td>
          <td>
            <code>$("#myTab a:last").tab('show')</code>
          </td>
          <td>激活标签页和内容区</td>
        </tr>
      </table>
      <table class="table table-bordered table-striped">
        <tr>
          <td>事件</td>
          <td>使用</td>
          <td>描述</td>
        </tr>
        <tr>
          <td>show.bs.tab</td>
          <td>
            $('a[data-toggle="tab"]').on('show.bs.tab', function (e)
              {
                e.target // activated tab
                e.relatedTarget // previous tab
              })
          </td>
          <td>当要激活标签页和标签内容的时候激活该事件</td>
        </tr>
        <tr>
          <td>shown.bs.tab</td>
          <td>
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e)
              {
                e.target // activated tab
                e.relatedTarget // previous tab
              })
          </td>
          <td>当标签页和标签内容载入完毕后，激活该事件</td>
        </tr>
      </table>

      <p>
        关于
        <code>e.target</code>
        和
        <code>e.relatedTarget</code>
        分别表示当前激活标签对象和前一个标签对象。
      </p>
      <p>可遍历对象查看对象各个属性和值：</p>
      <p>
        <pre><code>          $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e)
          {
              $.each(e.target, function(n, value)
              {
                  if(value) alert(n + ': ' + value);
              })
          })</code></pre>
      </p>
    </section>

    <section id='tooltips'>
      <div class="page-header">
        <h2>提示消息 <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
      </div>
      <h2>类型</h2>
      <h3>一般工具提示</h3>

      <div class="example tooltip-demo">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, cupiditate, eius, modi, veniam iure perspiciatis hic vitae quisquam ullam animi ipsum repellat temporibus
          <a href="#" data-toggle="tooltip" title="This is a tooltip">have a</a>
          officiis voluptatibus nostrum laborum debitis quidem illo deleniti iste! Minima, facilis aut explicabo debitis fugit dolor sint at soluta nulla omnis itaque
          <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a>
          illum commodi numquam enim quod architecto molestias qui eveniet et amet
          <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a>
          laborum quisquam quam provident esse beatae quas impedit voluptas nostrum
          <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a>
          aspernatur deleniti suscipit blanditiis dignissimos temporibus eligendi quae corrupti
          <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a>
          pariatur quo! Enim, ipsa, odio quasi laboriosam provident id nihil maxime architecto dolorum quas harum veniam perspiciatis tempora ducimus qui! Rem, obcaecati reiciendis officia quam.
        </p>
      </div>
      <h2>参数</h2>
      <h3>不同方向的提示</h3>
      <div class="example tooltip-demo">
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">左侧Tooltip</button>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">上方Tooltip</button>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">下方Tooltip</button>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">右侧Tooltip</button>
      </div>

      <h2>注意</h2>
      <div class="alert alert-danger">
        <h5>选择性加入的功能</h5>
        <p>
          出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 <strong>你必须自己初始化他们</strong>
          。
        </p>
      </div>
      <div class="alert alert-info">
        <h5>工具提示与按钮组和输入框组联合使用时需要一些特殊设置</h5>
        <p>
          在
          <code>.btn-group</code>
          或
          <code>.input-group</code>
          内的元素上使用工具提示时，你需要指定
          <code>container: 'body'</code>
          选项以避免不需要的副作用（例如，当工具提示显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
        </p>
      </div>
      <div class="alert alert-info">
        <h5>在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来</h5>
        <p>
          为了给
          <code>disabled</code>
          或
          <code>.disabled</code>
          元素添加工具提示，将需要增加工具提示的页面元素包裹在一个
          <code>&lt;div&gt;</code>
          中，然后对这个
          <code>&lt;div&gt;</code>
          元素应用工具提示。
        </p>
      </div>

      <h2 id="tooltips-usage">用法</h2>
      <p>通过JavaScript激活工具提示：</p>
      <div class="example">
        <pre class="prettyprint linenums"><code class="language-js">$(<span class="string">'#example'</span>).tooltip(options)</code></pre>
      </div>

      <h3>Markup</h3>
      <p>
        The generated markup of a tooltip is rather simple, though it does require a position (by default, set to
        <code>top</code>
        by the plugin).
      </p>
      <div class="example">
        <pre class="prettyprint linenums"><code class="language-html">&lt;div class=&quot;tooltip&quot;&gt;
          &lt;div class=&quot;tooltip-inner&quot;&gt;
            Tooltip!
          &lt;/div&gt;
          &lt;div class=&quot;tooltip-arrow&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;</code></pre>
      </div>

      <h3>选项</h3>
      <p>
        可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
        <code>data-</code>
        之后，例如
        <code>data-animation=""</code>
        。
      </p>
      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width: 100px;">名称</th>
              <th style="width: 100px;">类型</th>
              <th style="width: 50px;">默认值</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>animation</td>
              <td>boolean</td>
              <td>true</td>
              <td>决定是否应用淡入淡出动画。</td>
            </tr>
            <tr>
              <td>html</td>
              <td>boolean</td>
              <td>false</td>
              <td>
                是否允许展示html标签。
              </td>
            </tr>
            <tr>
              <td>placement</td>
              <td>string | function</td>
              <td>'top'</td>
              <td>
                top | bottom | left | right | auto.
                <br>
                显示的位置。
              </td>
            </tr>
            <tr>
              <td>selector</td>
              <td>string</td>
              <td>false</td>
              <td>
                当需要为动态DOM应用工具提示，需要手动指定选择器。
              </td>
            </tr>
            <tr>
              <td>title</td>
              <td>string | function</td>
              <td>''</td>
              <td>
                标题。
              </td>
            </tr>
            <tr>
              <td>trigger</td>
              <td>string</td>
              <td>'hover focus'</td>
              <td>
                click | hover | focus | manual. 触发方式。
              </td>
            </tr>
            <tr>
              <td>delay</td>
              <td>number | object</td>
              <td>0</td>
              <td>
                <p>
                  如果指定，则应用延迟。
                </p>
                <p>
                  <code>delay: { show: 500, hide: 100 }</code>
                </p>
              </td>
            </tr>
            <tr>
              <td>container</td>
              <td>string | false</td>
              <td>false</td>
              <td>
                <p>
                  决定相对位置的父级容器。
                  <code>container: 'body'</code>
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- /.table-responsive -->
      <div class="bs-callout bs-callout-info">
        <h4>对单个工具提示使用data属性</h4>
        <p>使用data属性可以为单个工具提示指定额外选项，如下所示。</p>
      </div>

      <h3>标记</h3>
      <div class="example">
        <pre class="prettyprint linenums"><code class="language-html">&lt;a href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;first tooltip&quot;&gt;Hover over me&lt;/a&gt;</code></pre>
      </div>

      <h3>方法</h3>

      <h4>$().tooltip(options)</h4>
      <p>为一组元素应用工具提示。</p>

      <h4>.tooltip('show')</h4>
      <p>展示工具提示。</p>
      <div class="example">
        <p>
          <code>js$(&#39;#element&#39;).tooltip(&#39;show&#39;)</code>
        </p>
      </div>
      <h4>.tooltip('hide')</h4>
      <p>隐藏工具提示。</p>
      <div class="example">
        <p>
          <code>js$(&#39;#element&#39;).tooltip(&#39;hide&#39;)</code>
        </p>
      </div>

      <h4>.tooltip('toggle')</h4>
      <p>展示或隐藏工具提示。</p>
      <div class="example">
        <p>
          <code>js$(&#39;#element&#39;).tooltip(&#39;toggle&#39;)</code>
        </p>
      </div>
      <h4>.tooltip('destroy')</h4>
      <p>隐藏并销毁工具提示。</p>
      <div class="example">
        <p>
          <code>js$(&#39;#element&#39;).tooltip(&#39;destroy&#39;)</code>
        </p>
      </div>

      <h3>事件</h3>
      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width: 150px;">事件类型</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>show.bs.tooltip</td>
              <td>
                当
                <code>show</code>
                方法被调用之后，此事件将被立即触发。
              </td>
            </tr>
            <tr>
              <td>shown.bs.tooltip</td>
              <td>当工具提示展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
            </tr>
            <tr>
              <td>hide.bs.tooltip</td>
              <td>
                当
                <code>hide</code>
                方法被调用之后，此事件被触发。
              </td>
            </tr>
            <tr>
              <td>hidden.bs.tooltip</td>
              <td>当工具提示被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="example">
        <pre class="prettyprint linenums"><code class="language-js">$(<span class="string">'#myTooltip'</span>).on(<span class="string">'hidden.bs.tooltip'</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span>
      <span class="comment">// do something…</span>
    })</code></pre>
      </div>
    </section>

    <section id="popovers" class="page-section">
      <div class="page-header">
        <h2>弹出框 <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
      </div>
      <div class="alert alert-danger">
        <h4>插件依赖</h4>
        <p>
          弹出框依赖
          <a href="#tooltips">工具提示插件</a>
          ，因此需要先加载工具提示插件。
        </p>
      </div>
      <div class="alert alert-danger">
        <h4>选择性加入的功能</h4>
        <p>
          出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 <strong>你必须自己初始化他们</strong>
          。
        </p>
      </div>
      <div class="alert alert-info">
        <h4>弹出框在按钮组和输入框组中使用时，需要额外的设置</h4>
        <p>
          当提示框与
          <code>.btn-group</code>
          或
          <code>.input-group</code>
          联合使用时，你需要指定
          <code>container: 'body'</code>
          选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
        </p>
      </div>
      <div class="alert alert-info">
        <h4>在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来</h4>
        <p>
          为了给
          <code>disabled</code>
          或
          <code>.disabled</code>
          元素添加弹出框时，将需要增加弹出框的页面元素包裹在一个
          <code>&lt;div&gt;</code>
          中，然后对这个
          <code>&lt;div&gt;</code>
          元素应用弹出框。
        </p>
      </div>
      <h2>类型</h2>
      <h3>静态类型</h3>
      <div class="example popover-examples">
        <div class="popover top">
          <div class="arrow"></div>
          <h3 class="popover-title">Popover top</h3>
          <div class="popover-content">
            <p>
              Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            </p>
          </div>
        </div>

        <div class="popover right">
          <div class="arrow"></div>
          <h3 class="popover-title">Popover right</h3>
          <div class="popover-content">
            <p>
              Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            </p>
          </div>
        </div>

        <div class="popover bottom">
          <div class="arrow"></div>
          <h3 class="popover-title">Popover bottom</h3>

          <div class="popover-content">
            <p>
              Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            </p>
          </div>
        </div>

        <div class="popover left">
          <div class="arrow"></div>
          <h3 class="popover-title">Popover left</h3>
          <div class="popover-content">
            <p>
              Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            </p>
          </div>
        </div>

        <div class="clearfix"></div>
      </div>
      <h3>不带箭头指示</h3>
      <div class="example popover-examples">
        <div class="popover">
          <div class="arrow"></div>
          <h3 class="popover-title">Popover top</h3>
          <div class="popover-content">
            <p>
              Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            </p>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <h3>动态演示</h3>
      <div class="example">
        <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">打开弹出框</a>
      </div>
      <h4>不同方向</h4>
      <div class="example text-center">
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">左侧弹框</button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">上方弹框</button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">下方弹框</button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">右侧弹框</button>
      </div>

      <h3>指定html元素作为弹出内容</h3>
      <div class="example">
        <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="right" data-target="$next">打开弹出框</a>
        <div id="popoverContent1" class="popover">
          <h3 class="popover-title">Popover top</h3>
          <table class="table">
            <tr>
              <td>Lorem ipsum dolor.</td>
              <td>Nisi, ad, quisquam!</td>
              <td>Eum, excepturi, placeat.</td>
            </tr>
            <tr>
              <td>Lorem ipsum dolor.</td>
              <td>Explicabo, nobis, nesciunt!</td>
              <td>Sequi, doloribus, natus.</td>
            </tr>
            <tr>
              <td>Lorem ipsum dolor.</td>
              <td>Ipsum, suscipit, quibusdam?</td>
              <td>Minus, tenetur, neque.</td>
            </tr>
          </table>
        </div>
      </div>
      <h2 id="popovers-usage">用法</h2>
      <p>通过JavaScript启用弹出框：</p>
      <div class="example">
        <p>
          <code>js$(&#39;#example&#39;).popover(options)</code>
        </p>
      </div>

      <h3>选项</h3>
      <p>
        可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
        <code>data-</code>
        之后，例如
        <code>data-animation=""</code>
        。
      </p>
      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width: 100px;">名称</th>
              <th style="width: 100px;">类型</th>
              <th style="width: 50px;">默认值</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>animation</td>
              <td>boolean</td>
              <td>true</td>
              <td>是否应用淡入淡出动画。</td>
            </tr>
            <tr>
              <td>html</td>
              <td>boolean</td>
              <td>false</td>
              <td>
                是否允许内容中包含html。
              </td>
            </tr>
            <tr>
              <td>placement</td>
              <td>string | function</td>
              <td>'right'</td>
              <td>
                top | bottom | left | right | auto.
                <br>
                显示位置
              </td>
            </tr>
            <tr>
              <td>selector</td>
              <td>string</td>
              <td>false</td>
              <td>
                当需要给动态的DOM元素应用工具提示时，需要手动制定选择器。
              </td>
            </tr>
            <tr>
              <td>trigger</td>
              <td>string</td>
              <td>'click'</td>
              <td>click | hover | focus | manual，决定交互方式。</td>
            </tr>
            <tr>
              <td>title</td>
              <td>string | function</td>
              <td>''</td>
              <td>
                标题
              </td>
            </tr>
            <tr>
              <td>content</td>
              <td>string | function</td>
              <td>''</td>
              <td>
                内容
              </td>
            </tr>
            <tr>
              <td>delay</td>
              <td>number | object</td>
              <td>0</td>
              <td>
                <p>
                  是否延迟展示。
                </p>
                <p>
                  <code>delay: { show: 500, hide: 100 }</code>
                </p>
              </td>
            </tr>
            <tr>
              <td>container</td>
              <td>string | false</td>
              <td>false</td>
              <td>
                <p>
                  决定相对位置的父级容器。
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- /.table-responsive -->
      <div class="bs-callout bs-callout-info">
        <h4>为单个弹出框应用data属性</h4>
        <p>对单个弹出框可以通过data属性单独指定选项，如上所示。</p>
      </div>

      <h3>方法</h3>
      <h4>$().popover(options)</h4>
      <p>为一组元素初始化弹出框。</p>

      <h4>.popover('show')</h4>
      <p>显示弹出框。</p>
      <div class="example">
        <p>
          <code>js$(&#39;#element&#39;).popover(&#39;show&#39;)</code>
        </p>
      </div>

      <h4>.popover('hide')</h4>
      <p>隐藏弹出框。</p>
      <div class="example">
        <p>
          <code>js$(&#39;#element&#39;).popover(&#39;hide&#39;)</code>
        </p>
      </div>

      <h4>.popover('toggle')</h4>
      <p>展示或隐藏弹出框。</p>
      <div class="example">
        <p>
          <code>js$(&#39;#element&#39;).popover(&#39;toggle&#39;)</code>
        </p>
      </div>

      <h4>.popover('destroy')</h4>
      <p>隐藏并销毁弹出框。</p>
      <div class="example">
        <p>
          <code>js$(&#39;#element&#39;).popover(&#39;destroy&#39;)</code>
        </p>
      </div>

      <h3>事件</h3>
      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width: 150px;">事件类型</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>show.bs.popover</td>
              <td>
                当
                <code>show</code>
                方法被调用之后，此事件将被立即触发。
              </td>
            </tr>
            <tr>
              <td>shown.bs.popover</td>
              <td>当弹出框展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
            </tr>
            <tr>
              <td>hide.bs.popover</td>
              <td>
                当
                <code>hide</code>
                方法被调用之后，此事件被触发。
              </td>
            </tr>
            <tr>
              <td>hidden.bs.popover</td>
              <td>当弹出框被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- /.table-responsive -->
      <div class="example">
<pre class="prettyprint linenums"><code class="language-js">$(<span class="string">'#myPopover'</span>).on(<span class="string">'hidden.bs.popover'</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span>
  <span class="comment">// do something…</span>
})</code></pre>
      </div>
    </section>

    <section id='collapse'>
      <div class="page-header">
        <h2>折叠 <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
      </div>
      <p>
        需要
        <a target='_blank' href='http://v3.bootcss.com/javascript/#transitions'>transition.js</a>
        支持。
      </p>
      <p>
        <code>.collapse</code>
        隐藏条目,
        <code>.collapse.in</code>
        显示条目。
      </p>
      <p>
        调用方式一：仅仅通过向页面元素添加
        <code>data-toggle="collapse"</code>
        和
        <code>data-target</code>
        就可以为其赋予控制可折叠页面元素的能力。
        <code>data-target</code>
        属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加
        <code>.collapse</code>
        。
      如果你希望可折叠页面元素的默认状态是展开的，请添加
        <code>.in</code>
        。
      为了给一组可折叠页面元素添加控制器，添加
        <code>data-parent="#selector"</code>
        即可
      </p>
      <p>
        调用方式二：手动触发
        <code>$(".collapse").collapse()</code>
      </p>

      <h3>类型</h3>
      <h4>结合面板</h4>
      <div class="example" contenteditable="true">
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Item 1</a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse fade">
              <div class="panel-body">
                The content of Item1.
                <code>.panel-collapse .collapse .fade</code>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Item 2</a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
              <div class="panel-body">
                <p>
                  The content of Item2.
                  <code>.panel-collapse .collapse .in</code>
                  默认显示。
                </p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Item 3</a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
              <div class="panel-body">
                The content of item3.
                <code>.panel-collapse .collapse</code>
              </div>
            </div>
          </div>
        </div>
      </div>

      <h4>结合按钮</h4>
      <div class="example" contenteditable="true">
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapseButton">hulala</button>
        <div id="collapseButton" class="collapse in">Ho la la hu la la, hu la hu la.</div>
      </div>

      <h3>变化</h3>
      <h4>方法和事件</h4>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 80px;">方法</th>
            <th>例子</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>.collapse(options)</td>
            <td>
              <code>$('#myCollapse').collapse({ toggle: false })</code>
            </td>
            <td>赋予页面元素可折叠功能。接受一个可选的object作为参数。</td>
          </tr>
          <tr>
            <td>.collapse('toggle')</td>
            <td>
              <code>$('#myCollapse').collapse('toggle')</code>
            </td>
            <td>展示或隐藏一个可折叠的页面元素。</td>
          </tr>
          <tr>
            <td>.collapse('show')</td>
            <td>
              <code>$('#myCollapse').collapse('show')</code>
            </td>
            <td>展示一个可折叠页面元素。</td>
          </tr>
          <tr>
            <td>.collapse('hide')</td>
            <td>
              <code>$('#myCollapse').collapse('hide')</code>
            </td>
            <td>隐藏一个可折叠页面元素。</td>
          </tr>
        </tbody>
      </table>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 80px;">事件</th>
            <th>使用</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>show.bs.collapse</td>
            <td>
              <code>$('#myCollapse').on('show.bs.collapse', function () { // do something… })</code>
            </td>
            <td>
              当
              <code>show</code>
              方法被调用时，此事件将被立即触发。
            </td>
          </tr>
          <tr>
            <td>shown.bs.collapse</td>
            <td>
              <code>$('#myCollapse').on('shown.bs.collapse', function () { // do something… })</code>
            </td>
            <td>当可折叠页面元素显示出来之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
          </tr>
          <tr>
            <td>hide.bs.collapse</td>
            <td>
              <code>$('#myCollapse').on('hide.bs.collapse', function () { // do something… })</code>
            </td>
            <td>
              当
              <code>hide</code>
              方法被调用时，此事件将被立即触发。
            </td>
          </tr>
          <tr>
            <td>hidden.bs.collapse</td>
            <td>
              <code>$('#myCollapse').on('hidden.bs.collapse', function () { // do something… })</code>
            </td>
            <td>当可折叠页面元素隐藏之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
          </tr>
        </tbody>
      </table>

    </section>

    <section id='carousel'>
      <div class="page-header">
        <h2>轮播</h2>
      </div>
      <p>
        使用方法一：通过data属性可以很容易的控制轮播的定位。
        <code>data-slide</code>
        可以接受控制播放位置的
        <code>prev</code>
        或
        <code>next</code>
        关键字。另外，还可以通过
        <code>data-slide-to</code>
        传递以
        <code>0</code>
        开始的幻灯片下标。
        <code>data-ride="carousel"</code>
        属性用来标记在页面加载之后即开始启动的轮播组件。
      </p>
      <p>
        使用方法二：通过js手动启动轮播组件：
        <code>$('.carousel').carousel()</code>
      </p>

      <h3>类型</h3>
      <h4>基本类型</h4>
      <div class='example'>
        <div class='container'>
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <img alt="First slide" src="img/aqua.jpg">
                <div class="carousel-caption">
                  <h3>我是第一张幻灯片</h3>
                  <p>:)</p>
                </div>
              </div>
              <div class="item">
                <img alt="First slide" src="img/color-splash.jpg">
                <div class="carousel-caption">
                  <h3>我是第二张幻灯片</h3>
                  <p>0.0</p>
                </div>
              </div>
              <div class="item">
                <img alt="First slide" src="img/color-splash-red.jpg">
                <div class="carousel-caption">
                  <h3>我是第三张幻灯片</h3>
                  <p>最后一张咯~</p>
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
              <span class="icon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
              <span class="icon-chevron-right"></span>
            </a>
          </div>
        </div>
      </div>

      <h3>变化</h3>
      <h4>选项</h4>
      <p>
        可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
        <code>data-</code>
        之后，例如
        <code>data-interval=""</code>
        。
      </p>
      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width: 100px;">名称</th>
              <th style="width: 50px;">类型</th>
              <th style="width: 50px;">默认值</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>interval</td>
              <td>number</td>
              <td>5000</td>
              <td>幻灯片轮换的等待时间。如果为false，轮播将不会自动开始循环。</td>
            </tr>
            <tr>
              <td>pause</td>
              <td>string</td>
              <td>"hover"</td>
              <td>鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。</td>
            </tr>
            <tr>
              <td>wrap</td>
              <td>boolean</td>
              <td>true</td>
              <td>轮播是否持续循环。</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- /.table-responsive -->

      <h4>方法和事件</h4>
      <p>
        可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
        <code>data-</code>
        之后，例如
        <code>data-interval=""</code>
        。
      </p>
      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th style="width: 100px;">方法</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>.carousel(options)</code>
              </td>
              <td>初始化轮播组件，接受一个可选的object类型的options参数，并开始幻灯片循环。</td>
            </tr>
            <tr>
              <td>
                <code>.carousel('cycle')</code>
              </td>
              <td>从左到右循环各帧。</td>
            </tr>
            <tr>
              <td>
                <code>.carousel('pause')</code>
              </td>
              <td>停止轮播。</td>
            </tr>
            <tr>
              <td>
                <code>.carousel(number)</code>
              </td>
              <td>将轮播定位到指定的帧上（帧下标以0开始，类似数组）。</td>
            </tr>
            <tr>
              <td>
                <code>.carousel('pre')</code>
              </td>
              <td>返回上一帧。</td>
            </tr>
            <tr>
              <td>
                <code>.carousel('next')</code>
              </td>
              <td>转到下一帧。</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- /.table-responsive -->

      <p>Bootstrap的轮播组件暴露了两个事件用于监听。</p>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 150px;">事件类型</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>slide.bs.carousel</td>
            <td>
              此事件在
              <code>slide</code>
              方法被调用之后立即出发。
            </td>
          </tr>
          <tr>
            <td>slid.bs.carousel</td>
            <td>当所有幻灯片播放完之后被触发。</td>
          </tr>
          <tr>
            <td colspan='2'>
              <code class="language-js">$('#myCarousel').on('slide.bs.carousel', function() {// do something…})</code>
            </td>
          </tr>
        </tbody>
      </table>

    </section>

    <section id="datetimepicker">
      <div class="page-header">
        <h2>日期选择</h2>
      </div>

      <p>日期选择插件可以帮助用户更方便准确的选择日期和时间。</p>
      <p>在ZUI中包含的日期选择控件基于开源项目 <a href="http://www.malot.fr/bootstrap-datetimepicker/" target="_blank">DateTime Picker</a> 定制开发。</p>

      <h3>类型</h3>
      <h4>日期选择</h4>
      <div class="example">
        <input type="text" class='form-control form-date' placeholder='选择或者输入一个日期：yyyy-MM-dd'>
      </div>

      <h4>时间选择</h4>
      <div class="example">
        <input type="text" class='form-control form-time' placeholder='选择或者输入一个时间：hh:mm'>
      </div>

      <h4>日期+时间选择</h4>
      <div class="example">
        <input type="text" class='form-control form-datetime' placeholder='选择或者输入一个日期+时间：yyyy-MM-dd hh:mm'>
      </div>

      <h3>变化</h3>
      <h4>禁用输入</h4>
      <p>只允许用户选择一个日期或时间，只需要给<code>input</code>加上<code>readonly</code>属性。</p>
      <div class="example">
        <div class="row">
          <div class="col-md-4"><input type="text" class='form-control form-date' placeholder='选择或者输入一个日期：yyyy-MM-dd' readonly></div>
          <div class="col-md-4"><input type="text" class='form-control form-time' placeholder='选择或者输入一个时间：hh:mm' readonly></div>
          <div class="col-md-4"><input type="text" class='form-control form-datetime' placeholder='选择或者输入一个日期+时间：yyyy-MM-dd hh:mm' readonly></div>
        </div>
      </div>

      <h4>使用输入框组</h4>
      <p>输入框组可以添加额外的按钮来操作日期选择插件。</p>
      <p>按钮中的<code>.icon-remove</code>用来移除输入的日期。<code>.icon-th</code>,<code>.icon-calendar</code>,<code>.icon-time</code>用来激活日期选择框。</p>
      <div class="example">
        <div class="row">
          <div class="col-md-4">
            <div class="input-group date form-datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
              <input class="form-control" size="16" type="text" value="" readonly>
              <span class="input-group-addon"><span class="icon-remove"></span></span>
              <span class="input-group-addon"><span class="icon-th"></span></span>
            </div>
          </div>
          <div class="col-md-4">
            <div class="input-group date form-date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
              <input class="form-control" size="16" type="text" value="" readonly>
              <span class="input-group-addon"><span class="icon-remove"></span></span>
              <span class="input-group-addon"><span class="icon-calendar"></span></span>
            </div>
          </div>
          <div class="col-md-4">
            <div class="input-group date form-time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
              <input class="form-control" size="16" type="text" value="" readonly>
              <span class="input-group-addon"><span class="icon-remove"></span></span>
              <span class="input-group-addon"><span class="icon-time"></span></span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="chosen">
      <div class="page-header">
        <h2>Chosen</h2>
      </div>

      <p>Chosen是用来增强单选列表和多选列表的更佳选择。</p>
      <h3>多项选择和单项选择</h3>
      <div class="example">
        <div class="row">
          <div class="col-md-6">
            <select data-placeholder="选择一个宠物..." class="chosen-select form-control" tabindex="2">
              <option value=""></option>
              <option value="cat">小猫</option>
              <option value="dog">小狗</option>
              <option value="fish">金鱼</option>
              <option value="dragon">龙</option>
            </select>
          </div>
          <div class="col-md-6">
            <select data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple>
              <option value="strawberries">草莓</option>
              <option value="apple">苹果</option>
              <option value="orange">橙子</option>
              <option value="cherry">樱桃</option>
              <option value="banana">香蕉</option>
              <option value="figs">无花果</option>
            </select>
          </div>
        </div>
      </div>

      <h3>图标选择插件</h3>
      <p>为方便选择漂亮的图标，依赖于Chosen新作了图标选择插件。</p>
      <div class="example">
        <form>
          <select name="chosenIcons" id="chosenIcons" data-value='icon-star'></select>
        </form>
      </div>
    </section>

    <section id="richeditor">
      <div class="page-header">
        <h2>富文本编辑器</h2>
      </div>

      <h3>类型</h3>
      <h4>默认模式</h4>
      <div class="example">
        <textarea id="content" name="content" class='form-control kindeditor' style="height:150px;visibility:hidden;">Hello, world!</textarea>
      </div>
      <h4>简单模式</h4>
      <div class="example">
        <textarea id="contentSimple" name="content" class='form-control kindeditorSimple' style="height:150px;visibility:hidden;">Hello, world!</textarea>
      </div>
      <h3>变化</h3>
      <h4>简单风格</h4>
      <div class="example">
        <textarea id="contentCustom" name="content" class='form-control customStyle' style="height:150px;visibility:hidden;">Hello, world!</textarea>
      </div>
    </section>

    <section id="droppable">
      <div class="page-header">
        <h2>拖放</h2>
      </div>

      <div class="example">
        <div class="row">
          <div class="col-md-3">
            <div class="panel">
              <div class="panel-heading">开始吧</div>
              <div class="panel-body" style="height: 100px">
                <button type="button" class='btn btn-danger btn-lg' data-toggle='droppable' data-target='.droppable-target'>拖动我</button>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="panel droppable-target">
              <div class="panel-heading">拖到这里</div>
              <div class="panel-body" style="height: 100px">
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="panel droppable-target">
              <div class="panel-heading">拖到这里</div>
              <div class="panel-body" style="height: 100px">
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="panel droppable-target">
              <div class="panel-heading">拖到这里</div>
              <div class="panel-body" style="height: 100px">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="autotrigger">
      <div class="page-header">
        <h2>自动触发器</h2>
      </div>

      <p>利用自动触发器能够不写一行Javascript代码做很多有趣的事情。</p>
      <h3>参数</h3>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>参数名</th>
            <th>说明</th>
            <th>可选值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>trigger</code></td>
            <td>触发器类型</td>
            <td><ul>
              <li><code>"toggle"</code>(默认值) 切换显示或隐藏状态</li>
              <li><code>"show"</code> 显示</li>
              <li><code>"hide"</code> 隐藏</li>
              <li><code>"toggleClass"</code> 增加或隐藏css class</li>
              <li><code>"addClass"</code> 增加css class</li>
              <li><code>"removeClass"</code>移除css class</li>
              <li><code>function(){/*自定义执行的操作*/}</code> 执行给定函数</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>selector</code></td>
            <td>子代选择器，用来过滤触发条件</td>
            <td>默认为<code>null</code></td>
          </tr>
          <tr>
            <td><code>events</code></td>
            <td>触发事件名</td>
            <td>绑定在触发器上的事件名称，默认为'click'，即点击元素时触发</td>
          </tr>
          <tr>
            <td><code>animate</code></td>
            <td>动画类型</td>
            <td>当显示或隐藏元素时执行动画的类型<ul>
              <li><code>"slide"</code>(默认)</li>
              <li><code>"fade"</code></li>
              <li><code>"normal"</code></li>
            </ul></td>
          </tr>
          <tr>
            <td><code>easing</code></td>
            <td>动画缓动函数</td>
            <td><ul>
              <li><code>"linear"</code>(默认)</li>
              <li><code>"swing"</code></li>
            </ul></td>
          </tr>
          <tr>
            <td><code>animateSpeed</code></td>
            <td>动画执行速度</td>
            <td><ul>
              <li><code>"normal"</code>(默认)</li>
              <li><code>"slow"</code></li>
              <li><code>"fast"</code></li>
              <li><code>400</code> 指定数字，表示动画执行可用的时间</li>
            </ul></td>
          </tr>
          <tr>
            <td><code>preventDefault</code></td>
            <td>是否阻止事件默认行为</td>
            <td><ul>
              <li><code>true</code>(默认)</li>
              <li><code>false</code></li>
            </ul></td>
          </tr>
          <tr>
            <td><code>cancelBubble</code></td>
            <td>是否取消事件冒泡</td>
            <td><ul>
              <li><code>true</code>(默认)</li>
              <li><code>false</code></li>
            </ul></td>
          </tr>
          <tr>
            <td><code>target</code></td>
            <td>触发后事件执行的主体</td>
            <td>使用jquery对象或者jquery选择器字符串来指定，如果为<code>null</code>，则指定为触发器自身</td>
          </tr>
          <tr>
            <td><code>before</code></td>
            <td>触发事件发生之前调用</td>
            <td>指定一个函数在触发事件发生之前调用，如果在此函数内返回<code>false</code>，则不执行后续触发过程</td>
          </tr>
          <tr>
            <td><code>after</code></td>
            <td>触发事件发生之后调用</td>
            <td>指定一个函数在触发事件发生之后调用</td>
          </tr>
        </tbody>
      </table>

      <h3>类型</h3>
      <h4>显示或隐藏元素</h4>
      <div class="example">
        <div class="row">
          <div class="col-sm-3">
            <button type='button' class='btn-block btn' data-toggle='toggle' data-target='#target1' data-animate='fade'>显示或隐藏</button>
            <button type='button' class='btn-block btn' data-toggle='show' data-target='#target1'>仅显示</button>
            <button type='button' class='btn-block btn' data-toggle='hide' data-target='#target1'>仅隐藏</button>
          </div>
          <div class="col-sm-9"><img id='target1' src="img/img2.jpg" width="200px" height="200px" class="img-circle" alt=""></div>
        </div>
      </div>

      <h4>切换css class</h4>
      <div class="example">
        <div class="row">
          <div class="col-sm-3">
            <button type='button' class='btn-block btn' data-toggle='toggleClass' data-target='#target2' data-data='img-circle'>切换 .img-circle</button>
            <button type='button' class='btn-block btn' data-toggle='addClass' data-target='#target2' data-data='img-thumbnail'>增加 .img-thumbnail</button>
            <button type='button' class='btn-block btn' data-toggle='removeClass' data-target='#target2' data-data='img-thumbnail'>移除 .img-thumbnail</button>
          </div>
          <div class="col-sm-9"><img id='target2' src="img/img2.jpg" width="200px" height="200px" class="img-circle" alt=""></div>
        </div>
      </div>

      <h5>综合例子</h5>
      <div class="example">
        <div class="dropdown">
          <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
            展开例子
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li>
              <a href="javascript:;" data-toggle='show' data-target='#createForm' id="createBtn" data-triggers='click,hide,self'>新建</a>
              <form id='createForm' class='hide' style="padding: 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background:#f1f1f1; margin: 0 0 5px 0">
                <div style="margin-bottom: 10px;">
                  <textarea name="createsomething" class="form-control" id="createsomething" cols="30" rows="5" style="width: 500px"></textarea>
                </div>
                <button class='btn btn-primary' type="submit">提交</button>
                <button class='btn' data-toggle='hide' data-target='#createForm' data-triggers='click,show,#createBtn'>取消</button>
              </form>
            </li>

            <li role="presentation" class="dropdown-header">Dropdown header</li>
            <li>
              <a href="#">编辑</a>
            </li>
            <li>
              <a href="#">删除</a>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
  <div style="height: 300px"></div>

  <script src="../assets/jquery.js"></script>
  <script src="../dist/js/zui.min.js"></script>
  <script src="../assets/datetimepicker/js/datetimepicker.min.js"></script>
  <script src="../assets/chosen/js/chosen.jquery.min.js"></script>
  <script src="../assets/chosen/js/chosen.icons.min.js" type="text/javascript"></script>
  <script src="../assets/kindeditor/kindeditor-all-min.js"></script>
  <script src="js/doc.js"></script>
  <script src="../assets/google-code-prettify/prettify.js"></script>

  <script>
  $(function()
  {
      $('#storeExample .alert-' + (store.enable ? 'success' : 'warning')).removeClass('hide');

      var $storeTable = $('#storeTable');
      function refershStore()
      {
          $storeTable.empty();
          var index = 0;
          store.forEach(function(key,value)
          {
              $storeTable.append('<tr><td>{0}</td><td class="store-name">{1}</td><td>{2}</td><td><a href="javascript:;" class="text-danger store-delete"><i class="icon-trash"></i></a></td></tr>'.format(index++, key, value));
          });
          $storeTable.find('.store-delete').click(function()
          {
              store.remove($(this).closest('tr').children('.store-name').text());
              refershStore();
          });
      }
      $storeTable.click()
      $('#storeAdd').click(function()
      {
          var key = $('#storeName').val(),
              val = $('#storeValue').val();
          if(key)
          {
              store.setItem(key, val);
              refershStore();
          }
          else
          {
              bootbox.alert('必须填写名称。');
          }
      });

      $('#storeClear').click(function()
      {
          store.clear();
          refershStore();
      });

      refershStore();
  });
  </script>
</body>
</html>
